import React, { useCallback } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import { Button, Checkbox, Form, Input, message } from 'antd';
import Particles from 'react-tsparticles';
import { loadFull } from 'tsparticles';
import loginStyle from './css/login.less'
import { useRequest } from 'ahooks';
import axios from 'axios';
import { useNavigate } from '_react-router@6.3.0@react-router';

// 发起网络请求，通过提交的信息去验证用户名和密码以及状态的验证
// const getCurrentUser = (values: any) => {
//     return axios.get(`http://localhost:3000/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`)
// }

function Login(props: any) {
    // 路由跳整方法
    const navigate = useNavigate()
    // 解构dispatch和公共状态
    const { dispatch } = props;

    // useRequest初使用
    // const { run: logIn, error, loading } = useRequest(getCurrentUser, {
    //     throttleWait: 300,
    //     manual: true,
    //     onSuccess: (result: any, params) => {
    //         if (result.status === 200) {
    //             console.log(result.data);
    //             if (result.data.length > 0) {
    //                 localStorage.setItem('token', JSON.stringify(result.data));
    //                 message.success(`登录成功!`);
    //                 navigate('/home');
    //             }
    //             else {
    //                 message.error(`登录失败，请检查用户名、密码以及权限!`);
    //             }
    //         }
    //     },
    // })

    //#region 粒子效果
    const particlesInit = useCallback(async (engine: any) => {
        console.log(engine);
        await loadFull(engine);
    }, []);
    // 粒子被正确加载到画布中时，这个函数被调用
    const particlesLoaded = useCallback(async (container: any) => {
        await console.log(container);
    }, []);
    const options: any = {
        "autoPlay": true,
        "background": {
            "color": {
                "value": "#ffffff"
            },
            "image": "url('https://particles.js.org/images/background3.jpg')",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover",
            "opacity": 1
        },
        "backgroundMask": {
            "composite": "destination-out",
            "cover": {
                "color": {
                    "value": {
                        "r": 255,
                        "g": 255,
                        "b": 255
                    }
                },
                "opacity": 1
            },
            "enable": true
        },
        "defaultThemes": {},
        "delay": 0,
        "fullScreen": {
            "enable": true,
            "zIndex": 1
        },
        "detectRetina": true,
        "duration": 0,
        "fpsLimit": 120,
        "interactivity": {
            "detectsOn": "window",
            "events": {
                "onClick": {
                    "enable": true,
                    "mode": "push"
                },
                "onDiv": {
                    "selectors": [],
                    "enable": false,
                    "mode": [],
                    "type": "circle"
                },
                "onHover": {
                    "enable": true,
                    "mode": "bubble",
                    "parallax": {
                        "enable": false,
                        "force": 60,
                        "smooth": 10
                    }
                },
                "resize": {
                    "delay": 0.5,
                    "enable": true
                }
            },
            "modes": {
                "attract": {
                    "distance": 200,
                    "duration": 0.4,
                    "easing": "ease-out-quad",
                    "factor": 1,
                    "maxSpeed": 50,
                    "speed": 1
                },
                "bounce": {
                    "distance": 200
                },
                "bubble": {
                    "distance": 400,
                    "duration": 2,
                    "mix": false,
                    "opacity": 1,
                    "size": 100,
                    "divs": {
                        "distance": 200,
                        "duration": 0.4,
                        "mix": false,
                        "selectors": []
                    }
                },
                "connect": {
                    "distance": 80,
                    "links": {
                        "opacity": 0.5
                    },
                    "radius": 60
                },
                "grab": {
                    "distance": 400,
                    "links": {
                        "blink": false,
                        "consent": false,
                        "opacity": 1
                    }
                },
                "push": {
                    "default": true,
                    "groups": [],
                    "quantity": 4
                },
                "remove": {
                    "quantity": 2
                },
                "repulse": {
                    "distance": 200,
                    "duration": 0.4,
                    "factor": 100,
                    "speed": 1,
                    "maxSpeed": 50,
                    "easing": "ease-out-quad",
                    "divs": {
                        "distance": 200,
                        "duration": 0.4,
                        "factor": 100,
                        "speed": 1,
                        "maxSpeed": 50,
                        "easing": "ease-out-quad",
                        "selectors": []
                    }
                },
                "slow": {
                    "factor": 3,
                    "radius": 200
                },
                "trail": {
                    "delay": 1,
                    "pauseOnStop": false,
                    "quantity": 1
                },
                "light": {
                    "area": {
                        "gradient": {
                            "start": {
                                "value": "#ffffff"
                            },
                            "stop": {
                                "value": "#000000"
                            }
                        },
                        "radius": 1000
                    },
                    "shadow": {
                        "color": {
                            "value": "#000000"
                        },
                        "length": 2000
                    }
                }
            }
        },
        "manualParticles": [],
        "particles": {
            "bounce": {
                "horizontal": {
                    "random": {
                        "enable": false,
                        "minimumValue": 0.1
                    },
                    "value": 1
                },
                "vertical": {
                    "random": {
                        "enable": false,
                        "minimumValue": 0.1
                    },
                    "value": 1
                }
            },
            "collisions": {
                "absorb": {
                    "speed": 2
                },
                "bounce": {
                    "horizontal": {
                        "random": {
                            "enable": false,
                            "minimumValue": 0.1
                        },
                        "value": 1
                    },
                    "vertical": {
                        "random": {
                            "enable": false,
                            "minimumValue": 0.1
                        },
                        "value": 1
                    }
                },
                "enable": false,
                "mode": "bounce",
                "overlap": {
                    "enable": true,
                    "retries": 0
                }
            },
            "color": {
                "value": "#ffffff",
                "animation": {
                    "h": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "decay": 0,
                        "sync": true
                    },
                    "s": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "decay": 0,
                        "sync": true
                    },
                    "l": {
                        "count": 0,
                        "enable": false,
                        "offset": 0,
                        "speed": 1,
                        "decay": 0,
                        "sync": true
                    }
                }
            },
            "groups": {},
            "move": {
                "angle": {
                    "offset": 0,
                    "value": 90
                },
                "attract": {
                    "distance": 200,
                    "enable": false,
                    "rotate": {
                        "x": 600,
                        "y": 1200
                    }
                },
                "center": {
                    "x": 50,
                    "y": 50,
                    "mode": "percent",
                    "radius": 0
                },
                "decay": 0,
                "distance": {},
                "direction": "none",
                "drift": 0,
                "enable": true,
                "gravity": {
                    "acceleration": 9.81,
                    "enable": false,
                    "inverse": false,
                    "maxSpeed": 50
                },
                "path": {
                    "clamp": true,
                    "delay": {
                        "random": {
                            "enable": false,
                            "minimumValue": 0
                        },
                        "value": 0
                    },
                    "enable": false,
                    "options": {}
                },
                "outModes": {
                    "default": "out",
                    "bottom": "out",
                    "left": "out",
                    "right": "out",
                    "top": "out"
                },
                "random": false,
                "size": false,
                "speed": 2,
                "spin": {
                    "acceleration": 0,
                    "enable": false
                },
                "straight": false,
                "trail": {
                    "enable": false,
                    "length": 10,
                    "fillColor": {
                        "value": "#000000"
                    }
                },
                "vibrate": false,
                "warp": false
            },
            "number": {
                "density": {
                    "enable": true,
                    "area": 800,
                    "factor": 1000
                },
                "limit": 0,
                "value": 80
            },
            "opacity": {
                "random": {
                    "enable": false,
                    "minimumValue": 0.1
                },
                "value": 1,
                "animation": {
                    "count": 0,
                    "enable": false,
                    "speed": 1,
                    "decay": 0,
                    "sync": false,
                    "destroy": "none",
                    "startValue": "random",
                    "minimumValue": 0.1
                }
            },
            "reduceDuplicates": false,
            "shadow": {
                "blur": 0,
                "color": {
                    "value": "#000"
                },
                "enable": false,
                "offset": {
                    "x": 0,
                    "y": 0
                }
            },
            "shape": {
                "options": {},
                "type": "circle"
            },
            "size": {
                "random": {
                    "enable": true,
                    "minimumValue": 1
                },
                "value": {
                    "min": 1,
                    "max": 30
                },
                "animation": {
                    "count": 0,
                    "enable": false,
                    "speed": 40,
                    "decay": 0,
                    "sync": false,
                    "destroy": "none",
                    "startValue": "random",
                    "minimumValue": 0.1
                }
            },
            "stroke": {
                "width": 0
            },
            "zIndex": {
                "random": {
                    "enable": false,
                    "minimumValue": 0
                },
                "value": 0,
                "opacityRate": 1,
                "sizeRate": 1,
                "velocityRate": 1
            },
            "life": {
                "count": 0,
                "delay": {
                    "random": {
                        "enable": false,
                        "minimumValue": 0
                    },
                    "value": 0,
                    "sync": false
                },
                "duration": {
                    "random": {
                        "enable": false,
                        "minimumValue": 0.0001
                    },
                    "value": 0,
                    "sync": false
                }
            },
            "rotate": {
                "random": {
                    "enable": false,
                    "minimumValue": 0
                },
                "value": 0,
                "animation": {
                    "enable": false,
                    "speed": 0,
                    "decay": 0,
                    "sync": false
                },
                "direction": "clockwise",
                "path": false
            },
            "destroy": {
                "bounds": {},
                "mode": "none",
                "split": {
                    "count": 1,
                    "factor": {
                        "random": {
                            "enable": false,
                            "minimumValue": 0
                        },
                        "value": 3
                    },
                    "rate": {
                        "random": {
                            "enable": false,
                            "minimumValue": 0
                        },
                        "value": {
                            "min": 4,
                            "max": 9
                        }
                    },
                    "sizeOffset": true,
                    "particles": {}
                }
            },
            "roll": {
                "darken": {
                    "enable": false,
                    "value": 0
                },
                "enable": false,
                "enlighten": {
                    "enable": false,
                    "value": 0
                },
                "mode": "vertical",
                "speed": 25
            },
            "tilt": {
                "random": {
                    "enable": false,
                    "minimumValue": 0
                },
                "value": 0,
                "animation": {
                    "enable": false,
                    "speed": 0,
                    "decay": 0,
                    "sync": false
                },
                "direction": "clockwise",
                "enable": false
            },
            "twinkle": {
                "lines": {
                    "enable": false,
                    "frequency": 0.05,
                    "opacity": 1
                },
                "particles": {
                    "enable": false,
                    "frequency": 0.05,
                    "opacity": 1
                }
            },
            "wobble": {
                "distance": 5,
                "enable": false,
                "speed": {
                    "angle": 50,
                    "move": 10
                }
            },
            "orbit": {
                "animation": {
                    "count": 0,
                    "enable": false,
                    "speed": 1,
                    "decay": 0,
                    "sync": false
                },
                "enable": false,
                "opacity": 1,
                "rotation": {
                    "random": {
                        "enable": false,
                        "minimumValue": 0
                    },
                    "value": 45
                },
                "width": 1
            },
            "links": {
                "blink": false,
                "color": {
                    "value": "#fff"
                },
                "consent": false,
                "distance": 100,
                "enable": false,
                "frequency": 1,
                "opacity": 1,
                "shadow": {
                    "blur": 5,
                    "color": {
                        "value": "#000"
                    },
                    "enable": false
                },
                "triangles": {
                    "enable": false,
                    "frequency": 1
                },
                "width": 1,
                "warp": false
            },
            "repulse": {
                "random": {
                    "enable": false,
                    "minimumValue": 0
                },
                "value": 0,
                "enabled": false,
                "distance": 1,
                "duration": 1,
                "factor": 1,
                "speed": 1
            }
        },
        "pauseOnBlur": true,
        "pauseOnOutsideViewport": true,
        "responsive": [],
        "smooth": false,
        "style": {},
        "themes": [],
        "zLayers": 100
    }
    //#endregion
    console.log(loginStyle);
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        // logIn(values)
        dispatch({
            type: 'StandBox/getRightList',
            payload: {}
        })
        dispatch({
            type: 'StandBox/getChildrenList',
            payload: {}
        })
        dispatch({
            type: 'StandBox/getCurrentUserData',
            payload: {
                currentItem:values,
                message,
                navigate
            }
        })
        
    };
    return (
        
        <div style={{ 'position': 'relative', backgroundColor: '#fba', height: '100vh' }}>

            <Particles id='tsparticles'
                init={particlesInit}
                loaded={particlesLoaded}
                options={options}
            ></Particles>
            <div className={loginStyle['container']}>
                <div className={loginStyle['title']}><h1>全球新闻发布管理系统</h1></div>
                <Form
                    name="normal_login"
                    className={loginStyle["login-form"]}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: 'Please input your Username!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: 'Please input your Password!' }]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            placeholder="Password"
                            autoComplete='password'
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>

                        <a className={loginStyle["login-form-forgot"]} href="">
                            Forgot password
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={loginStyle["login-form-button"]}>
                            Log in
                        </Button>
                        Or <a href="">register now!</a>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    return {
        currentUserList: state.StandBox.currentUserList
    }
}
export default connect(mapStateToProps)(Login)